<template>
  <div class="content">
  <el-collapse v-model="activeNames">
    
    <el-collapse-item title="2021-now" name="2021-now">
      <FromerInfoCard 
        v-for="(i,index) in year2021"
        :key="index"
        :hname    = "i.hname"
        :name     = "i.name"
        :time     = "i.time"
        :thesis    = "i.thesis"
        :destination = "i.destination"
        :imgUrl   = "i.imgUrl"
      />
    </el-collapse-item>
    <el-collapse-item title="2016-2020" name="2016-2020">
      <FromerInfoCard 
        v-for="(i,index) in year2016"
        :key="index"
        :hname    = "i.hname"
        :name     = "i.name"
        :time     = "i.time"
        :thesis    = "i.thesis"
        :destination = "i.destination"
        :imgUrl   = "i.imgUrl"
      />
    </el-collapse-item>
    <el-collapse-item title="2011-2015" name="2011-2015">
      <FromerInfoCard 
        v-for="(i,index) in year2011"
        :key="index"
        :hname    = "i.hname"
        :name     = "i.name"
        :time     = "i.time"
        :thesis    = "i.thesis"
        :destination = "i.destination"
        :imgUrl   = "i.imgUrl"
      />
    </el-collapse-item>

  </el-collapse>
  </div>
</template>

<script>
import FromerInfoCard from './FromerInfoCard.vue'

export default {
  components: { FromerInfoCard },
  data() {
    return {
      activeNames: ["2021-now","2016-2020"],
      year2011: [],
      year2016: [],
      year2021: []
    };
  },
  created() {
    this.$http.get('/json/PeopleGD.json').then((response) => {
      // console.log(response);
      this.year2011 = response.data.year2011;
      this.year2016 = response.data.year2016;
      this.year2021 = response.data.year2021;
    });

  }

};
</script>

<style lang="less" scoped>
@import "../el-collapse-item.less";
</style>
